@import '../../style/them.scss';

.view-card {
  height: 380rpx;
  padding: 20rpx 20rpx 0rpx 20rpx;
  border-radius: 25rpx;
  position: relative;

  image {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  .inner-card {
    margin: 0 20rpx;
    height: 104rpx;
    background: rgba(0, 0, 0, 0.35);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.8));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;

    .title {
      width: 90%;
      margin: 20rpx 30rpx;
      color: rgb(255, 255, 255);
      font-size: 36rpx;
      position: absolute;
      bottom: 34rpx;
    }

    .card {
      margin: 0 24rpx;
      display: flex;
      position: absolute;
      bottom: 18rpx;

      .item {
        padding: 0 10rpx;
        color: #ececec;
        font-size: 22rpx;
      }
    }

  }
}

.blank {
  width: 100vw;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  height: 130rpx;
}